<template>
	<view class="configuration">
		<view class="top-box">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>奖品配置</el-breadcrumb-item>
				<el-breadcrumb-item>{{ getBreadcrumb }}</el-breadcrumb-item>
			</el-breadcrumb>
			
			<view class="header-serch flex ac jcsb">
				<view class="search-box flex ac">
					<!-- <view class="search flex ac">
						<view class="search-title" v-if="!second">姓名：</view>
						<el-input v-model="name" placeholder="请输入姓名"></el-input>
					</view>
					<view class="search-btn">
						<el-button type="primary" class="search-button" @click='search'>查询</el-button>
					</view> -->
				</view>
				<el-button class="add-user" type="primary" @click='openDelog(0)'>配置奖品</el-button>
			</view>
			
			<el-table 
				:data="Table.TableDataList" 
				style="width: 100%;" 
				height="calc(100vh - 298px)"
				stripe
				:header-cell-style="{background:'#E9ECEE',color:'#16171F'}">
				<el-table-column 
					show-overflow-tooltip 
					:prop="item.prop" 
					:label="item.label" 
					v-for="(item,index) in newTitleList"
					:key="index">
					<template slot-scope="scope">
						<!-- 每一项的值 -->
						<span v-if="item.prop">{{  (item.prop == 'createTime' || item.prop == 'updateTime')? new Date(scope.row[item.prop]).format():scope.row[item.prop] }}</span>
						
						<!-- 操作项 -->
						<view v-if="!item.prop && !second">
							<el-button class="start-color" @click="openDelog(1, scope.row)" type="text" size="small">编辑</el-button>
							<el-button class="start-color" @click="delClick(scope.row, scope.$index)" type="text" size="small">删除</el-button>
						</view>
					</template>
				</el-table-column>
			</el-table>
		</view>
		<view class="footer">
			<el-pagination  
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange"
				:current-page="Table.page"  
				layout="total, prev, pager, next, jumper, sizes" 
				background 
				:total="Table.count"
				:page-sizes="[10, 12]" 
				:page-size.sync="Table.limit">
			</el-pagination>
			<view class="pageLimit">当前显示{{Table.limit}}条/页</view>
		</view>
		
		<confirm @confirmFlagClick="confirmFlagClick" :confirmFlag="confirmFlag" :title="confirmTitle"></confirm>
		<prizeDialog :dialogVisible="addUserDialogFlag" @closeDialog="closeDialog" :title="addDialogTitle" :item="updateCode"></prizeDialog>
	</view>
</template>

<script>
	import { Util } from '../utils/util.js'
	import { Request } from '../model/request.js'
	
	import confirm from './dialog/confirm.vue'
	import prizeDialog from './dialog/prizeDialog.vue'
	 
	export default {
		components: { prizeDialog, confirm },
		
		props: {
			second: {
				type: [String, Number],
				default: 0
			}
		},
		
		computed: {
			getBreadcrumb() {
				let c = '奖品配置'
				// if (this.second == 1) {
				// 	c = '活动配置'
				// } else if (this.second == 2) {
				// 	c = '广告链接'
				// }
				return c
			},
			
			newTitleList() {
				return this.Table.titleList
			}
		},
		
		data() {
			return {
				phone: '',
				name: '',
				Table: {
					titleList: [{
							prop: "id",
							label: "奖品ID"
						},
						{
							prop: "activityId",
							label: "h5链接ID"
						},
						{
							prop: "activityDescripte",
							label: "奖品描述"
						},
						{
							prop: "createTime",
							label: "创建时间"
						},
						{
							prop: "updateTime",
							label: "更新时间"
						},
						{
							label: "操作"
						}
					],
					TableDataList: [],
					result: '',
					page: 1,
					limit: 10,
					count: 0
				},
				
				addUserDialogFlag: false,
				addDialogTitle: '',
				
				confirmFlag: false,
				confirmTitle: '',
				
				currentItem: {},
				updateCode: ''
			}
		},
		
		mounted() {
			this.initTable()
		},
		
		watch: {
			second(newVal, oldVal) {
				this.phone = ''
				this.name = ''
				this.initTable()
			}
		},
		
		methods: {
			async initTable(page) {
				this.Table.TableDataList = []
				if (!Util.isNull(page)) {
					this.Table.page = page
				} else {
					this.Table.page = 1
				}
				let res = await Request.ACTIVEFINDALL(this.Table.page, this.Table.limit)
				if (!Util.isNull(res)) {
					this.Table.TableDataList = res.data.records
					this.Table.count = res.data.total
				} else {
					this.Table.TableDataList = null
				}
			},
			
			// 配置新增，编辑
			openDelog(i, item=null) {
				if (i) {
					this.addDialogTitle = '编辑'
					this.updateCode = item
				} else {
					this.addDialogTitle = '新增奖品'
				}
				this.addUserDialogFlag = true
			},
			
			closeDialog(flag) {
				this.addUserDialogFlag = false
				if (typeof flag != 'function' && flag) {
					this.initTable()
				}
			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.initTable()
			},
			
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.initTable(val)
			},
			
			delClick(item, i) { // 删除
				this.currentItem = item
				this.confirmTitle = `确认删除奖品？`
				this.confirmFlag = true
			},
			
			// 确认框触发事件
			async confirmFlagClick(i) {
				if (i) { // 确认
					console.log(this.currentItem, 'current')
					let res = await Request.ACTIVEDELETE(this.currentItem.id)
					if (res.code == 200) {
						Util.showToast('删除成功')
						this.initTable()
					}
				}
				this.confirmFlag = false
				this.clearData()
			},
			
			clearData() {
				this.currentItem = {}
			}
		}
	}
</script>

<style scoped>
	.configuration {
		/* padding: 20px 40px 50px; */
		position: relative;
	}
	
	.top-box {
		padding: 20px 40px 0;
	}
	
	.header-serch {
		margin: 30px 0;
	}
	
	.search-title {
		min-width: 44px;
		font-size: 14px;
		font-weight: 500;
		color: #16171F;
		/* text-align: right; */
	}
	
	.search-btn {
		margin-left: 30px;
	}
	
	.footer {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		/* position: absolute; */
		/* left: 0; */
		/* bottom: 0px; */
		justify-content: center;
		height: 130px;
		background: #FFFFFF;
		box-shadow: 0px -7px 9px 0px rgba(0, 0, 0, 0.02);
	}
	
	.del-color {
		color: #D1141F;
	}
	
	.start-color {
		color: #4A92FD;
	}
	
	>>> .el-input__inner{
		height: 32px;
	}
	
	.search-button, .add-user {
		font-size: 14px;
		height: 32px;
		line-height: 32px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.qr-code-box {
		height: 50px;
	}
	
	.tki-qrcode {
		height: 100%;
	}
</style>
